/* eslint-disable */
/**
 * Modal内Form表单下FormItem格式
 * 2018-3-7 加入span 动态配置
 *          input 动态style
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Form, Row, Col, Select, Input, Cascader, DatePicker, TimePicker, Radio, Button, TreeSelect,Checkbox,InputNumber} from 'antd';
import moment from 'moment';
import MyIcon from '../common/MyIcon';
import myStyles from './normalFormItemInModal.less';
import config from "../../config";
const FormItem = Form.Item;
const Option = Select.Option;
const TextArea = Input.TextArea;
const {RangePicker} = DatePicker;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const TreeNode = TreeSelect.TreeNode;
const CheckboxGroup = Checkbox.Group;

const NormalFormItemInModal = ({item, getFieldDecorator, colon, formItemLayout, disabled,noOffset,offset}) => {
  if (disabled)
    item.readonly = disabled;

  return (
    <div  style={{display:item.show?'none':'block'}}>
      <Col span={item.span || 7} offset={offset ? 1:0} style={{marginLeft:offset?40:0,...item.style2}}>
      {item.type === 'input' &&
      <FormItem label={item.label} colon={!!colon} {...formItemLayout} >
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <Input
              placeholder={item.placeholder || ''}
              disabled={item.readonly}
              style={item.style}
              onBlur={item.onBlur}
              addonBefore={item.addonBefore || ''}
              addonAfter={item.addonAfter || ''}
              maxLength={item.maxLength}
              // onChange={item.onChange}
            />
          )}
      </FormItem>}
        {item.type === 'inputNumber' &&
        <FormItem label={item.label} className={item.className} style={item.style} colon={item.colon}>
          {
            getFieldDecorator(item.paramName, {
              initialValue: item.initialValue ? item.initialValue : '',
              rules: item.rules || null
            })(
              <InputNumber style={{width: item.width || 150,height:'30px',padding:'2px 2px'}} size={config.size} min={item.min} max={item.max} placeholder={item.placeholder || "请输入"} disabled={item.disabled} addonAfter={item.after}/>
            )
          }
        </FormItem>
        }
      {item.type === 'searchInput' &&
      <FormItem label={item.label} colon={!!colon}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <Search
              className={myStyles.searchInput}
              onSearch={item.onSearch}
              onClick={item.onClick}
              enterButton={item.enterButton!=='hide'}
              readOnly={item.readOnly}
              disabled={item.readonly}
              style={[item.style, {height: '28px'}]}
            />
          )}
      </FormItem>}
      {
        item.type==='title' &&
        <p style={{width:'100%',textAlign:'left',borderBottom:'1px solid #D2D2D2',fontSize:16,fontWeight:'bolder',margin:0,lineHeight:'40px'}}>
          {item.label}
        </p>
      }
      {item.type === 'textArea' &&
      <FormItem label={item.label} colon={!!colon} style={{minHeight: 90}}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <TextArea
              disabled={item.readonly}
              autosize={{minRows: 2, maxRows: 2}}
              maxLength={item.maxLength}
              placeholder={item.placeholder}
              style={{marginTop:10,...item.style}}
            />
          )}
      </FormItem>}
      {item.type === 'select' &&
      <FormItem label={item.label} colon={!!colon}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <Select getPopupContainer={triggerNode => triggerNode.parentNode} onChange={item.onChange} disabled={item.readonly} mode={item.mode} style={item.style} onSelect={item.onSelect} showSearch={item.showSearch} optionFilterProp={'children'}>
              {item.options.map((optionItem, optionIndex) => (
                  <Option key={optionItem.key} value={optionItem.value} disabled={!!optionItem.disabled}>
                    {optionItem.text || optionItem.label}
                  </Option>
                )
              )}
            </Select>
          )}
      </FormItem>}
      {item.type === 'cascader' &&
      <FormItem label={item.label} colon={!!colon}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <Cascader
              options={[]}
              placeholder="请选择"
            />
          )}
      </FormItem>}
      {item.type === 'areaPicker' &&
      <FormItem label={item.label} colon={!!colon}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <Cascader
              options={item.options}
              placeholder="请选择"
              allowClear={item.allowClear}
              onChange={item.onChange}
            />
          )}
        {item.deleteShow &&
        <MyIcon
          type="icon-shanchu"
          onClick={item.deleteFun}
          style={{fontSize: 18, position: 'absolute', right: 7, top: -7, color: '#FC3737', zIndex: 200000}}
        />
        }
      </FormItem>}
      {item.type === 'datePicker' &&
      <FormItem label={item.label} colon={!!colon}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || null,
            rules: item.rules || []
          })(
            <DatePicker onChange={item.onChange} format={item.format} showTime={item.showTime} disabled={item.readonly}/>
          )}
      </FormItem>}
      {item.type === 'timePicker' &&
      <FormItem label={item.label} colon={!!colon}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || null,
            rules: item.rules || []
          })(
            <TimePicker disabledHours={item.disabledHours} onChange={item.onChange}/>
          )}
      </FormItem>}
      {item.type === 'radio' &&
      <FormItem label={item.label} colon={!!colon} style={{height: 40,...item.style}}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || null,
            rules: item.rules || []
          })(
            <RadioGroup onChange={item.onChange}>
              {
                item.options.map((option,index) => (
                    <Radio key={index} value={option.value}>
                      {option.text}
                    </Radio>
                  )
                )}
            </RadioGroup>
          )}
      </FormItem>}
      {item.type === 'iconButton' && item.show &&
      <span onClick={item.onClick}
            title={item.title}
            style={{position: 'relative', top: 25, left: -40, cursor: 'pointer'}}>
      <MyIcon type={item.icon} style={{...item.style,fontSize:20}}/>
    </span>}
      {item.type === 'button' &&
      <span style={{display: 'inline-block', height: 75, position: 'relative', top: 25,}}>
     <Button onClick={item.onClick} style={{height: 28}}>{item.label}</Button>
    </span>}
      {item.type === 'text' &&
      <FormItem label={item.label} colon={!!colon}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <div>
              {item.initialValue}
            </div>
          )}
      </FormItem>}
      {item.type === 'doubleText' &&
      <FormItem label={item.label} colon={!!colon}>
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
          })(
            <div style={item.style}>
              <span style={item.style1}>{item.text1}</span>
              <span style={item.style2}>{item.text2}</span>
            </div>
          )}
      </FormItem>}
      {item.type === 'empty' && <div style={{height: 75}}/>}
      {item.type === 'treeSelect' &&
      <FormItem label={item.label} colon={!!colon} className={myStyles.bigHeightItem}
      >
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <TreeSelect onChange={item.onChange}
                        disabled={item.readonly}
                        treeData={item.options}
                        treeCheckable={item.treeCheckable}
                        onSelect={item.onSelect}
                        allowClear={item.allowClear}
                        dropdownStyle={{height:200}}
            />
          )}
      </FormItem>}
      {/*{item.type === 'richText' &&
      <FormItem label={item.label} colon={!!colon} style={item.style}
      >
        {
          getFieldDecorator(item.paramName, {
            initialValue: item.initialValue || '',
            rules: item.rules || []
          })(
            <RichText onChange={item.onChange}/>
          )}
      </FormItem>}*/}
      {item.type === 'checkBox' &&
      <FormItem label={item.label} colon={!!colon}
      >
        {
          getFieldDecorator(item.paramName, {
            rules: item.rules || []
          })(
            <Checkbox onChange={item.onChange} style={item.style} defaultChecked={item.initialValue||false}>
              {item.text}
            </Checkbox>
          )}
      </FormItem>}
      {item.type === 'doubleCheckBoxGroup' &&
      <FormItem label={item.label} colon={!!colon} style={item.style3}
      >
        {
          getFieldDecorator(item.paramName, {
            rules: item.rules || []
          })(
            <div style={item.style}>
              <CheckboxGroup  style={item.style1} options={item.options1} onChange={item.onChange1}/>
              <CheckboxGroup  style={item.style2} options={item.options2} onChange={item.onChange2}/>
            </div>

          )}
      </FormItem>}
      {item.type === 'randomButton' &&
      <Button style={item.style} onClick={item.onClick}>
        {item.label}
      </Button>
      }
      </Col>
    </div>
  )
};
function mapStateToProps(state) {
  return {};
}
export default connect(mapStateToProps)(NormalFormItemInModal);
